<template>
  <div class="about">
    <div class="close-btn">></div>
    
    <ul class="menu">
      <li class="menu-item">
        音乐
        <ul class="menu-two">
          <li class="menu-item">
            歌单
            <ul class="menu-three">
              <li class="menu-item"> <router-link to="/video">video</router-link></li>
              <li class="menu-item"><router-link to="/picture">Home</router-link></li>
              <li class="menu-item"><router-link to="/user">user</router-link></li>
              <li class="menu-item"><router-link to="/songlist">songlist</router-link></li>
              <li class="menu-item"><router-link to="/login">login</router-link></li>
              <li class="menu-item"><router-link to="/userpage">userpage</router-link></li>
              <li class="menu-item"><router-link to="/songer">songer</router-link></li>
              <li class="menu-item"><router-link to="/playing">playing</router-link></li>
              <li class="menu-item">test3</li>
              <li class="menu-item">test3</li>
            </ul>
          </li>
          <li class="menu-item">test2</li>
        </ul>
      </li>
      <li class="menu-item">歌单</li>
      <li class="menu-item">推文</li>
      <li class="menu-item">用户</li>
      <li class="menu-item">在看</li>
    </ul>
  </div>
</template>
<style scoped>
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.close-btn{
      background: green;
    height: 40px;
    display: flex;
    align-items: center;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.about {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);

    display: flex;
    align-items: center;
}
.about:hover ul.menu{
  display: block;
}
.menu {
  position: relative;
  background-color:#054965;
  display:none;
}
.menu-two {
  position: absolute;
  left: 80px;
  top: 0;
  background-color: #1fb8c0;
  display: none;
}
.menu-three {
  position: absolute;
  left: 80px;
  top: 0;
  width: max-content;
  display: none;
  background-color:#0abdba85;
}
.menu-item {
  width: 80px;
  height: 80px;
  /* background: palegoldenrod; */
  line-height: 80px;
}
.menu-two .menu-item {
  /* background: palegreen; */
}
.menu-three .menu-item {
  /* background: rgb(112, 153, 230); */
  width: 80px;
  height: 24px;
  line-height: 24px;
}
.menu-item:hover > ul {
  display: block;
}
.menu-item:hover > .menu-three {
  display: flex;
}
</style>
